<script setup>
import { onMounted, ref } from 'vue'
import { getDropListAPI,addArea,getAreaDetailAPI ,editArea} from "../../../api/area"
const isShow = ref(false)
const PCRF = ref([])
let options = ref({})
const getDropList = async()=>{
  const res = await getDropListAPI()
  PCRF.value = res.data
  options.value = PCRF.value.map((i) =>{
  return {
    value: i.areaId,
    label: i.areaName,
  }
})
}
onMounted(()=>{
  getDropList()
})
const form = ref({
  areaName:'',
  spaceNumber:'',
  areaProportion:'',
  ruleId:null,
  remark:''
})
const rules = ref({
  areaName:[
    {required:true,message:'请输入区域名称'}
  ],
  spaceNumber:[
    {required:true,message:'请输入车位数'}
  ],
  areaProportion:[
    {required:true,message:'请输入面积'}
  ],
  ruleId:[
    {required:true,message:'请选择计费规则'}
  ]
})
const areaRef = ref(null)
const emit = defineEmits(['update'])
const confirm = ()=>{
  areaRef.value.validate(async(valid)=>{
    if(valid){
      if(form.value.id){
        const {ruleName,hoverRuleName,...data} = form.value
        console.log(ruleName,hoverRuleName);
        await editArea(data)
      }else{
        await addArea(form.value)
      }
      close()
      emit('update')
    }
  })
}
const close = ()=>{
  isShow.value = false
  areaRef.value.resetFields()
}
const getAreaDetail = async(id)=>{
  const res = await getAreaDetailAPI(id)
  console.log(res);
}
defineExpose({isShow,getAreaDetail,form})
</script>

<template>
  <el-dialog v-model="isShow" title="添加区域" width="40%">
    <el-form class="form" label-position="top" ref="areaRef" :model="form" :rules="rules" >
      <el-form-item label="区域名称" style="width: 380px;" prop="areaName">
        <el-input placeholder="请输入区域名称" v-model="form.areaName"></el-input>
      </el-form-item>
      <el-form-item label="车位数(个)" style="width: 380px;" prop="spaceNumber">
        <el-input placeholder="请输入车位个数" v-model="form.spaceNumber"></el-input>
      </el-form-item>
      <el-form-item label="面积(㎡)"  style="width: 395px;" prop="areaProportion">
        <el-input class="input" placeholder="请输入面积" v-model="form.areaProportion"></el-input>
      </el-form-item>
      <el-form-item label="关联计费规则"  prop="ruleId">
        <el-select-v2
          v-model="form.ruleId"
          placeholder="请选择"
          :options="options"
          style="width: 380px;"
        />
      </el-form-item>
      <el-form-item label="备注"  style="width: 380px;">
        <el-input type="textarea" v-model="form.remark" placeholder="请输入备注"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="confirm">确认</el-button>
    </template>
  </el-dialog>
</template>

<style scoped>
.form{
  margin-left: 100px;
}
.input.el-input::after{
  content: '㎡';
}
</style>
